<template>
  <div class="generic-management">
    <!-- 添加按钮 -->
    <el-button v-if="canAdd" type="primary" @click="handleAdd">
      添加{{ entityName }}
    </el-button>
    
    <!-- 数据表格 -->
    <el-table :data="dataList" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
      />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button v-if="canEdit" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button v-if="canDelete" size="small" type="danger" @click="handleDelete(scope.row[primaryKey])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="currentItem" label-width="100px">
        <el-form-item
          v-for="field in formFields"
          :key="field.prop"
          :label="field.label"
        >
          <template v-if="field.type === 'input'">
            <el-input
              v-model="currentItem[field.prop]"
              :placeholder="`请输入${field.label}`"
            />
          </template>
          <template v-else-if="field.type === 'select'">
            <el-select
              v-model="currentItem[field.prop]"
              :placeholder="`请选择${field.label}`"
            >
              <el-option
                v-for="option in field.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </template>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const emit = defineEmits(['add', 'edit', 'delete']);

const props = defineProps({
  dataList: { type: Array, default: () => [] },
  columns: { type: Array, default: () => [] },
  formFields: { type: Array, default: () => [] },
  canAdd: { type: Boolean, default: true },
  canEdit: { type: Boolean, default: true },
  canDelete: { type: Boolean, default: true },
  primaryKey: { type: String, default: 'id' }, // 主键字段
  entityName: { type: String, required: true }, // 新增：显式传递实体名称（如"食物"、"用户"）
});

const dialogVisible = ref(false);
const dialogTitle = computed(() => {
  return `${props.entityName}管理`; // 使用props传递的实体名称生成标题
});
const currentItem = ref({});

// 处理添加操作
const handleAdd = () => {
  currentItem.value = {};
  dialogVisible.value = true;
};

// 处理编辑操作
const handleEdit = (item) => {
  currentItem.value = { ...item };
  dialogVisible.value = true;
};

// 处理保存操作（区分添加/编辑）
const handleSave = () => {
  if (currentItem.value[props.primaryKey]) {
    emit('edit', currentItem.value); // 触发编辑事件
  } else {
    emit('add', currentItem.value); // 触发添加事件
  }
  dialogVisible.value = false;
};

// 处理删除操作（通过主键传递）
const handleDelete = (id) => {
  emit('delete', id); // 触发删除事件
};
</script>

<style scoped>
.generic-management {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.el-dialog {
  width: 500px;
}
</style>